import React  ,{Component} from 'react';
import { SketchPicker } from 'react-color';
import { Select } from 'antd';
import './set-color.css';
class SetColor extends Component{
  
  componentDidMount() {
    document.addEventListener('click', this.hideColorPicker);
  }
  stopPropagation(e){
    e.nativeEvent.stopImmediatePropagation();//阻止冒泡事件
  }
    state = {
        background1: this.props.background1,
        showPicker1:false,
        background2: this.props.background2,
        showPicker2:false,
        background3: this.props.background3,
        showPicker3:false,
        background4: this.props.background4,
        showPicker4:false,
        background5: this.props.background5,
        showPicker5:false,
        visible:[true,true,true,true,true]
      };
      
    
      handleChangeComplete1 = (color) => {
        this.setState({ background1: color.hex });
        this.props.setColor1(this.state.background1)
      };
      handleChangeComplete2 = (color) => {
        this.setState({ background2: color.hex });
        this.props.setColor2(this.state.background2)
      };
      handleChangeComplete3 = (color) => {
        this.setState({ background3: color.hex });
        this.props.setColor3(this.state.background3)
      };
      handleChangeComplete4 = (color) => {
        this.setState({ background4: color.hex });
        this.props.setColor4(this.state.background4)
      };
      handleChangeComplete5 = (color) => {
        this.setState({ background5: color.hex });
        this.props.setColor5(this.state.background5)
      };
      hideColorPicker=()=>{
          this.setState({
              showPicker1:false,
              showPicker2:false,
              showPicker3:false,
              showPicker4:false,
              showPicker5:false,

        })
      }
      handleClick1=(event)=>{
        if(this.state.visible[0]){
        this.stopPropagation(event);
        this.setState({
            showPicker1:true,
            showPicker2:false,
            showPicker3:false,
            showPicker4:false,
            showPicker5:false,

      })}
      }
      handleClick2=(event)=>{
        if(this.state.visible[1]){
        this.stopPropagation(event);
        this.setState({
            showPicker1:false,
            showPicker2:true,
            showPicker3:false,
            showPicker4:false,
            showPicker5:false,

      })
    }
    }
    handleClick3=(event)=>{
      if(this.state.visible[2]){
      this.stopPropagation(event);
      this.setState({ 
        showPicker1:false,
        showPicker2:false,
        showPicker3:true,
        showPicker4:false,
        showPicker5:false,
       });
      }
    }
    handleClick4=(event)=>{
      if(this.state.visible[3]){
      this.stopPropagation(event);
      this.setState({ 
        showPicker1:false,
        showPicker2:false,
        showPicker3:false,
        showPicker4:true,
        showPicker5:false,
       })
      } 
    }
    handleClick5=(event)=>{
      if(this.state.visible[4]){
      this.stopPropagation(event);
      this.setState({ 
        showPicker1:false,
        showPicker2:false,
        showPicker3:false,
        showPicker4:false,
        showPicker5:true,
       })}
    }
    showPicker1=(showPicker1)=>{
       if(showPicker1){
           return(
            <div  className='show1' onClick={this.handleClick1.bind(this)}>
           < SketchPicker color={ this.state.background1 }
           onChangeComplete={ this.handleChangeComplete1 }
           />
           </div>)
       }
      }
    showPicker2=(showPicker2)=>{
        if(showPicker2){
            return(
            <div  className='show2' onClick={this.handleClick2.bind(this)}>
            < SketchPicker color={ this.state.background2 }
            onChangeComplete={ this.handleChangeComplete2 }
            />
            </div>)
        }
       }
    showPicker3=(showPicker3)=>{
        if(showPicker3){
            return(
            <div  className='show3' onClick={this.handleClick3.bind(this)}>    
            < SketchPicker color={ this.state.background3 }
            onChangeComplete={ this.handleChangeComplete3 }
            />
            </div>)
        }
       }
    showPicker4=(showPicker4)=>{
        if(showPicker4){
            return(
            <div  className='show4' onClick={this.handleClick4.bind(this)}>
            < SketchPicker color={ this.state.background4 }
            onChangeComplete={ this.handleChangeComplete4 }
            />
            </div>)
        }
       }
    showPicker5=(showPicker5)=>{
        if(showPicker5){
            return(
            <div  className='show5' onClick={this.handleClick5.bind(this)}>   
            < SketchPicker color={ this.state.background5 }
            onChangeComplete={ this.handleChangeComplete5 }
            />
            </div>)
        }
       }
       handleChange=(value)=>{
         console.log('hhhh',value==='2');
         this.props.setNums(value);
         if(value==='2'){
           this.setState({
             background1: this.props.background1,
             background2: this.props.background2,
             background3:'white',
             background4:'white',
             background5:'white',
             visible:[true,true,false,false,false]
           })
         }else if(value==='3'){
          this.setState({
            background1: this.props.background1,
            background2: this.props.background2,
            background3: this.props.background3,
            background4:'white',
            background5:'white',
            visible:[true,true,true,false,false]
          })
         }else if(value==='4'){
           this.setState({
             background1: this.props.background1,
             background2: this.props.background2,
             background3: this.props.background3,
             background4: this.props.background4,
             background5:'white',
             visible:[true,true,true,true,false]
           })
         }else{
          this.setState({
            background1: this.props.background1,
            background2: this.props.background2,
            background3: this.props.background3,
            background4: this.props.background4,
            background5: this.props.background5,
            visible:[true,true,true,true,true]
          })
         }
        
       }
    render(){
        return(
          <div>
            <div className='outter' >
            <div className='select'>
             <Select defaultValue="5" style={{ width: 70 ,marginRight:'10px'}} 
             onChange={this.handleChange}
             >
             <Select value="2">2</Select>
             <Select value="3">3</Select>
             <Select value="4">4</Select>
             <Select value="5">5</Select>
             </Select>
             </div>
         
            <div className={this.state.visible[0] ?'colorbox1':'colorbox2'} style={{backgroundColor:this.state.background1}}
            onClick={this.handleClick1.bind(this)}>
            </div>
            {this.showPicker1(this.state.showPicker1)}
            <div className={this.state.visible[1] ?'colorbox1':'colorbox2'} style={{backgroundColor:this.state.background2}}
            onClick={this.handleClick2.bind(this)}>
            </div>
            {this.showPicker2(this.state.showPicker2)}
            <div className={this.state.visible[2] ?'colorbox1':'colorbox2'} style={{backgroundColor:this.state.background3}}
            onClick={this.handleClick3.bind(this)}>
            </div>
            {this.showPicker3(this.state.showPicker3)}
            <div className={this.state.visible[3] ?'colorbox1':'colorbox2'} style={{backgroundColor:this.state.background4}}
            onClick={this.handleClick4.bind(this)}>
            </div>
            {this.showPicker4(this.state.showPicker4)}
            <div className={this.state.visible[4] ?'colorbox1':'colorbox2'} style={{backgroundColor:this.state.background5}}
            onClick={this.handleClick5.bind(this)}>
            </div>
            {this.showPicker5(this.state.showPicker5)}

            </div>
            </div>
            
             );
       }
      
    }


export default SetColor;